// 汇款记录
<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				@clickRight="showSetUp"
				@clickLeft="goHome"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="#CD001B"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#FDFDFD" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>

		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">
				<view class="titleBoxcenter">
					<text>{{ i18n.ctwfont1 }}</text>
				</view>
			</view>
			<!-- search模块 -->
			<view class="searchBox">
				<uni-row class="searchBoxrow">
					<uni-col :span="19">
						<view class="searchBoxcol">
							<view class="searchBoxcolTitle">{{ i18n.ctwfont2 }}</view>
							<!-- start="2021-1-20" -->
							<!-- end="2021-12-20" -->
							<uni-datetime-picker
								style="width: 100%;"
								:reverseOrder="false"
								type="daterange"
								:clear-icon="false"
								:value="search.value1"
								rangeSeparator="-"
								@change="datetimeChange"
							/>
						</view>
						<view class="searchBoxcol" v-if="customerList.length > 0">
							<view class="searchBoxcolTitle">{{ this.$t('maps.ctwfont42') }}</view>
							<hpy-form-select
								style="width: 100%;"
								:dataList="customerList"
								text="text"
								name="value"
								:title="this.$t('maps.ctwfont5')"
								clear
								@change="customerOnchange"
								v-model="search.value4"
								@cancel="customerOnCancel"
							/>
						</view>
					</uni-col>
					<uni-col :span="5">
						<view class="searchBoxcol">
							<button @tap="searchSubmit" size="mini" class="searchBtn" type="default">{{ i18n.ctwfont3 }}</button>
						</view>
					</uni-col>
					<uni-col :span="6">
						<!-- 		<view class="searchBoxcol">
							<button size="mini" class="searchBtn2" type="default">
								<uni-icons type="upload-filled" size="14" style="margin-right: 5px;"></uni-icons>
								导出
							</button>
						</view> -->
					</uni-col>
				</uni-row>
			</view>
			<!-- 小红线 -->
			<view class="honLine"></view>
			<view class="cardBox">
				<view class="loadingBox" v-if="loading"><uni-load-more :showText="false" color="#333" status="loading"></uni-load-more></view>
				<uni-table v-else emptyText="ไม่มีข้อมูลแสดง">
					<!-- 支付类型payType
					账号account
					开户名accountName
					开户行accountBank
					备注mark -->
					<!-- 表头行 -->
					<uni-tr>
						<uni-th style="border-top-left-radius: 5px; font-size: $uni-font-size-custom-b;" align="center" bg="#E4E4E4" color="#424451" width="90">{{ i18n.ctwfont4 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont5 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont6 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont19 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont12 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont13 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont14 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont15 }}</uni-th>
						<uni-th align="center" bg="#E4E4E4" style="font-size: $uni-font-size-custom-b;" color="#424451" width="90">{{ i18n.ctwfont7 }}</uni-th>
						<uni-th style="border-top-right-radius: 5px; font-size: $uni-font-size-custom-b;" align="center" bg="#E4E4E4" color="#424451" width="90">{{ i18n.ctwfont16 }}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in cardArrList" :key="index">
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.orderCode }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.payDate }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.exchangeRate }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ approvalType(item.remittanceStatus) }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ payTypeValue(item.payType) }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.account }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.accountName }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.accountBank }}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.payMoney | computedNum}}</uni-td>
						<uni-td align="center" style="font-size: $uni-font-size-custom-a; line-height: 12px;">{{ item.mark }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<view class="paginationBottom" v-show="!loading">
				<page-pagination
					class="paginationBoxL"
					mode="multi"
					color="#CD001B"
					:pageSize="pageSize"
					:showPageSize="7"
					forceEllipses
					:total="total"
					:currentPage="currentPage"
					@change="paginationChange"
				></page-pagination>
				<view class="paginationBoxR">
					<input type="number" class="paginationBoxRInput" placeholder="page" v-model="paginationNum" />
					<button size="mini" @tap="paginationBtn" class="paginationBoxRBtn" type="default">{{ i18n.ctwfont17 }}</button>
				</view>
			</view>
		</view>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import { getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import { lastMonthDate } from '@/utils/lastMonthDate.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			back_k: 0,
			paginationNum: '', // 分页输入值
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			search: {
				value1: [lastMonthDate(), this.formatDate(new Date())],
				value4: ''
			},
			loading: false, // 加载
			loadingTime: '', // 定时
			pageSize: 10, // 条数
			currentPage: 1, // 页数
			total: 0, // 总数
			// 订单arr
			cardArrList: [],
			customerList: []
		};
	},
	onShow() {
		this.getCustomerCode();
		const jurisdiction = getStorage('jurisdiction');
		if (jurisdiction) {
			const isGet = JSON.parse(jurisdiction);
			if (isGet.remittanceHistory == 0) {
				this.getList();
			}
		} else {
			this.getList();
		}
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	components: { setUpPages, signOut },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 64; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('remittance');
		},
		payTypeValue() {
			return function(val) {
				if (val === '02601') {
					return this.$t('remittance').ctwfont9;
				} else if (val === '02602') {
					return this.$t('remittance').ctwfont10;
				} else if (val === '02603') {
					return this.$t('remittance').ctwfont8;
				} else if (val === '02604') {
					return this.$t('remittance').ctwfont11;
				}
			};
		},
		approvalType() {
			return function(val) {
				return Number(val) === 1 ? this.$t('remittance').ctwfont20 : this.$t('remittance').ctwfont18
			}
		}
	},
	methods: {
		goHome() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/me/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/me/index');
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
						// return plus.runtime.quit();
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						} else {
							uni.navigateBack({
								delta: 1
							});
						}
					}
				}
			}
		},
		// 获取数据
		async getList() {
			this.loading = true;
			this.loadingTime = setTimeout(() => {
				this.loading = false;
			}, 5000);
			const { value1, value4 } = this.search;
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				createCustomerCode: user.customerCode,
				customerCode: value4 || user.customerCode,
				page: this.currentPage,
				limit: this.pageSize,
				beginDate: this.formatDate(value1[0]),
				endDate: this.formatDate(value1[1])
			};
			const { data: res } = await this.$http(true, 'api/E3/depositInfo', params, 'GET');
			this.loading = false;
			clearTimeout(this.loadingTime);
			if (res.errno === 0) {
				if (res.data) {
					this.total = res.data.total;
					res.data.list.forEach(item => {
						if (item.payDate) {
							item.payDate = item.payDate.substring(0, 10);
						}
					});
					this.cardArrList = res.data.list;
				} else {
					this.total = 0;
					this.cardArrList = [];
				}
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 搜索
		searchSubmit() {
			this.currentPage = 1; // 页数
			this.getList();
		},
		// 分页器
		paginationChange(e) {
			this.currentPage = e; // 页数
			this.getList();
		},
		// 输入跳转
		paginationBtn() {
			const num = this.paginationNum > this.total / 10 ? this.total / 10 : this.paginationNum;
			this.currentPage = Math.ceil(num) === 0 ? 1 : Math.ceil(num); // 页数
			this.paginationNum = Math.ceil(num) === 0 ? 1 : Math.ceil(num);
			this.getList();
		},
		// 时间选择
		datetimeChange(e) {
			this.search.value1 = e;
		},
		// 时间处理
		formatDate(value) {
			const dt = new Date(value);
			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, 0);
			const d = (dt.getDate() + '').padStart(2, 0);
			return `${y}-${m}-${d}`;
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		},
		customerOnchange(e) {
			this.search.value4 = e.value.value;
		},
		// 取消选择客户号
		customerOnCancel(e) {
			this.search.value4 = '';
		},
		// 获取客户代号数据
		async getCustomerCode() {
			const jurisdiction = getStorage('jurisdiction');
			if (jurisdiction) {
				let objJurisdiction = JSON.parse(jurisdiction);
				if (objJurisdiction) {
					if (objJurisdiction.remittanceHistory == 2) {
						const user = JSON.parse(getStorage('userconter'));
						const params = {
							customerCode: user.customerCode,
							functionCode: 'REMITTANCE_HISTORY'
						};
						const { data: res } = await this.$http(true, 'api/E3/mainShippingAddress', params, 'GET');
						if (res.errno === 0) {
							if (res.data.length > 0) {
								const arr = [];
								res.data.forEach(item => {
									if (typeof item != 'string') {
										const obj = {
											text: item.customerCode,
											value: item.customerCode
										};
										arr.push(obj);
									} else {
										const obj = {
											text: item,
											value: item
										};
										arr.push(obj);
									}
								});
								if (this.search.value4 === '' && objJurisdiction.remittanceHistory != 0) {
									this.search.value4 = arr[0].value;
									// 为代理客户时
									this.getList();
								}
								this.customerList = arr;
							}
						} else {
							const err = codeMapFun().find(item => item[res.errno]);
							if (err) {
								uni.showToast({
									title: err[res.errno],
									icon: 'none',
									position: 'top'
								});
							} else {
								uni.showToast({
									title: res.errmsg,
									icon: 'none',
									position: 'top'
								});
							}
						}
					}
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
	min-height: 30px;
}
::v-deep .is-disabled {
	background-color: #fff;
}
::v-deep .input-value {
	line-height: 30px;
}
::v-deep .select-picker {
	line-height: 30px;
}
::v-deep .uni-pagination__btn {
	width: 50px;
	border: none;
}
::v-deep .uni-table-th {
	padding: 3px 0;
}
::v-deep .uni-date__x-input {
	height: 30px;
	line-height: 30px;
	padding: 0 5px;
}
::v-deep .uni-date-x {
	font-size: $uni-font-size-custom-a;
	// padding: 0;
	// padding-right: 10px;
}
::v-deep .uni-date-editor--x .uni-date__icon-clear {
	padding-top: 4px;
	border: none;
}
::v-deep .uni-input-input {
	font-size: $uni-font-size-custom-b;
}
.loadingBox {
	height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	// background-color: rgba(0, 0, 0, 0.5);
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #CD001B;
		width: 100%;
	}
}
.zhuti {
	padding: 0 15px;
	box-sizing: border-box;
	.titleBox {
		margin-bottom: 5px;
		display: flex;
		justify-content: center;
		.titleBoxcenter {
			width: 100%;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			text-align: center;
			background-color: #f2f2f2;
		}
	}
	.honLine {
		border-top: 2px solid #d80c24;
		margin: 10px auto;
	}
	.searchBox {
		margin-top: 20px;
		.searchBoxrow {
			.searchBoxcol {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
				// line-height: 30px;
				.searchBoxcolTitle {
					width: 100px;
					margin-right: 10px;
					font-size: $uni-font-size-custom-d;
					color: #333;
				}
				.searchBtn {
					background-color: #CD001B;
					padding: 0 20px;
					margin-right: 0px;
					border-radius: 5px;
					color: #ffffff;
					// line-height: 2;
				}
				.searchBtn2 {
					background-color: #ffffff;
					padding: 0 10px;
					margin-right: 0px;
					// line-height: 1.8;
				}
			}
		}
	}
	.cardBox {
		margin-top: 20px;
	}
	.paginationBottom {
		// position: fixed;
		// bottom: 30px;
		// width: 100%;
		padding: 30px 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.paginationBoxL {
			flex: 2;
			height: 30px;
			line-height: 30px;
		}
		.paginationBoxR {
			flex: 1;
			display: flex;
			justify-content: space-between;
			.paginationBoxRInput {
				border: 1px solid #efefef;
				border-radius: 5px;
				margin: 0 5px;
				padding: 5px;
				height: 30px;
				// line-height: 30px;
				width: 50px;
				text-align: center;
				box-sizing: border-box;
			}
			.paginationBoxRBtn {
				background-color: #CD001B;
				padding: 0 10px;
				border-radius: 5px;
				color: #ffffff;
				// line-height: 2;
			}
		}
	}
}
</style>
